<template>
<div class="media-episode">
  <!-- 单集 -->
  <div class="media-episode-item" v-if="episodeList == null">
    <!-- 封面 -->
    <div class="media-episode-item-cover"><el-image style="width:96px;height:60px" src="img"></el-image></div>
    <!-- 右侧信息 -->
    <div class="media-episode-item-details">
      <!-- 集数 -->
      <div class="media-episode-item-index">第 n 话</div>
      <!-- 标题 -->
      <div class="media-episode-item-title">这是什么番呢</div>
    </div>
  </div>

  <a class="media-episode-item" v-else 
    v-for="(episode, index) in episodeList" :key="index" 
    :href="'/play/md'+episode.bangumi_id+'/ep'+episode.num">
    <!-- 封面 -->
    <div class="media-episode-item-cover"><el-image style="width:96px;height:60px" :src="episode.cover"></el-image></div>
    <!-- 右侧信息 -->
    <div class="media-episode-item-details">
      <!-- 集数 -->
      <div class="media-episode-item-index">第 {{episode.num}} 话</div>
      <!-- 标题 -->
      <div class="media-episode-item-title">{{episode.name}}</div>
    </div>
  </a>
</div>
</template>
<script>
export default {
  data () {
    return {}
  },
  props: ['episodeList'],
}
</script>
<style scoped>
/* 番剧选集部分 */
.media-episode {
  width: 80%;
  margin: 50px auto;
  min-width: 700px;
}
/* 单个剧集 */
.media-episode-item {
  display: inline-block;
  width: 205px;
  height: 60px;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  margin:6px 10px;
  cursor: pointer;
}
.media-episode-item:hover {
  color: #269cc8;
}
.media-episode-item:hover .media-episode-item-title{
  color: #269cc8;
}
.media-episode-item-cover {
  position: relative;
  overflow: hidden;
  display: block;
  width: 96px;
  height: 60px;
  float: left;
}
.media-episode-item-cover .el-image {
  border-radius: 4px 0 0 4px;
}
/* 剧集右侧信息 */
.media-episode-item-details {
  position: relative;
  overflow: hidden;
  max-height: 60px;
}
/* 集数 */
.media-episode-item-index {
  font-family: Microsoft Yahei;
  padding-left: 8px;
  padding-top: 6px;
  display: inline-block;
  font-size: 10px;
  line-height: 11px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
/* 本集标题 */
.media-episode-item-title {
  margin-top: 5px;
  font-size: 10px;
  padding: 0 8px;
  color:#787878;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2; 
  overflow: hidden;
}
</style>